<!-- 审批流程 -->
<template>
  <div class="approval">
    <s-table
      ref="table"
      rowKey="id"
      :columns="columns"
      bordered
      :data="loadData"
    >
      <!-- 表头 start -->
      <template slot="title">
        <div style="display: flex; justify-content: space-between">
          <div>
            <a-radio-group v-model="type" button-style="solid" @change="handleRadio">
              <a-radio-button :value="1">{{ $t('all.autotext1096') }}</a-radio-button>
              <a-radio-button  :value="2">{{ $t('all.autotext446') }}</a-radio-button>
            </a-radio-group>
          </div>
          <a-button
            v-if="editable"
            type="primary"
            icon="plus"
            @click="onSet('')"
          >
            {{ $t('all.autotext409') }}
          </a-button>
        </div>
      </template>
      <span slot="operation" slot-scope="text, record">
        <template>
          <a-space>
            <a v-if="editable" @click="onSet(record)">{{ $t('all.autotext919') }}</a>
            <a  @click="onSee(record)">{{ $t('all.autotext568') }}</a>
            <a-popconfirm
              :title="$t('all.autotext631')"
              :ok-text="$t('all.autotext792')"
              :cancel-text="$t('all.autotext975')"
              @confirm="onDel(record)"
            >
              <a v-if="editable">{{ $t('all.autotext379') }}</a>
            </a-popconfirm>

          </a-space>
        </template>
      </span>
    </s-table>
  </div>
</template>

<script>
import { selectFlowList, deleteById } from '@/api/project/configItem/approval'

export default {
  props: {
    editable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      configId: '',
      proId: '',
      type: 1,
      columns: [
        {
          title: this.$t('all.autotext334'),
          width: '100px',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: this.$t('all.autotext1277'),
          key: 'flowName',
          dataIndex: 'flowName'
        },
        {
          title: this.$t('all.autotext1153'),
          key: 'researchName',
          dataIndex: 'researchName'
        },
        {
          title: this.$t('all.autotext187'),
          dataIndex: 'operation',
          width: '150px',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loadData: parameter => {
        return selectFlowList({
          ...parameter,
          proId: this.proId,
          type: this.type,
          configId: this.configId
        }).then(res => {
          res.content = res.content.map(val => {
            val.researchName = val.researchList.map(item => `${item.researchCenterNo} - ${item.orgName}`).join('，')
            return val
          })
          return res
        })
      }
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
    this.configId = this.$route.query.configId
  },
  activated () {
    this.$refs.table.refresh(true)
  },
  methods: {
    // 受试者研究者切换
    handleRadio () {
      this.$refs.table.refresh(true)
    },
    // 编辑
    onSet (e) {
      if (e) {
        this.$router.push({
          path: '/overview/config/approvalSet',
          query: { type: this.type, uid: e.id, configId: this.configId }
        })
      } else {
        this.$router.push({
          path: '/overview/config/approvalSet',
          query: { add: 1, type: this.type, configId: this.configId }
        })
      }
    },
    // 查看
    onSee (e) {
      this.$router.push({
        path: '/overview/config/approvalDetail',
        query: { type: this.type, uid: e.id, configId: this.configId }
      })
    },
    // 删除
    async onDel (e) {
      await deleteById({
        id: e.id,
        proId: this.proId,
        config: this.configId
      })
      this.$message.success(this.$t('all.autotext332'))
      this.$refs.table.refresh(true)
    }
  }
}
</script>
